<template>
	<div class="heatSealing">
		<div class="tableBox">
			<div class="title">热封条件变更</div>
			<el-form ref="form" label-position="left" :model="form" label-width="53%">
				<el-form-item label="确认者"><div><el-input v-model="form.name" placeholder="请选择"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<el-table :data="tableData" max-height="660px">
				<el-table-column type="index" width="80">
					<template slot-scope="scope">
						<div @click="createRow" v-if="scope.$index == tableData.length - 1"><img src="@/assets/img/add.png" /></div>
						<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png" /></div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="时间" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.time" placeholder="请输时间"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="timelength" label="制带热封" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.timelength" placeholder="请选择"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="errorName" label="产品判断" align="center">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.errorName" placeholder="请选择"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="logName" label="最终热封" align="center">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.logName" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				tableData: [
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '2',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '3',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '4',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					},
					{
						id: '5',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: ''
					}
				],
			}
		},
		methods: {
			changeItem(id) {
				this.selectedIndex = id;
			},
			createRow() {
				var list = {
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				};
				this.tableData.push(list);
			},
			delRow(val, row) {
				this.tableData.splice(val, 1);
			},
			onSubmit() {
				console.log('submit!');
			}
		}
	}
</script>
<style lang="scss" scoped>
.heatSealing {
	.title {
		font-weight: 600;
		padding-top: 10px;
		color:#000;
	}
}
</style>
<style scoped>
.heatSealing{
	height: calc(100vh - 150px);
	overflow-y: auto;
}
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 30px 30px;
	height:auto;
}
.heatSealing >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:5px;
}
.heatSealing >>> .el-form-item__label{
	font-size:24px;
	color:#000;
	line-height: 60px;
}
.heatSealing >>> .el-form-item__content{
	font-size:24px;
	color:#666666;
}
.heatSealing >>> .el-input > input{
	background:#fff;
	font-size:24px;
}
.heatSealing >>> .el-input--large .el-input__inner {
	padding-left: 30px !important;
}
</style>
